<template>
  <div>
    <def-layout type="col0-24" :page="page" @invoke="invoke">
      <div slot="search" class="form-items">
        <el-form-item>
          <el-input v-model="formSearch.keyword" placeholder="支出单单号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.pageNo" placeholder="纸厂单号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.creator" placeholder="申请人" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.carNo" placeholder="车牌号" />
        </el-form-item>
        <el-form-item>
          <el-input v-model="formSearch.semitrailerNo" placeholder="挂车车牌号" />
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="formSearch.createTime"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="申请时间(起)"
            end-placeholder="申请时间(到)"
            value-format="yyyy-MM-dd"
            :picker-options="$constants.pickerOptions"
          />
        </el-form-item>
      </div>
      <div id="subOutputRank-print" slot="content" class="grid">
        <page-grid v-if="self!=null" :parent="self">
          <div slot="columns">
            <el-table-column prop="no" align="center" label="支出单单号" width="150" />
            <!-- <el-table-column prop="pageNo" align="center" label="纸厂单号" width="150" /> -->
            <el-table-column prop="borrowingAmount" align="center" label="出车借款/元" width="120" />
            <el-table-column prop="borrowingTime" align="center" label="借款时日期" width="130" />
            <el-table-column prop="driverName" align="center" label="申请人" width="150" />

            <el-table-column prop="carNo" align="center" label="车牌号" width="120" />
            <el-table-column prop="semitrailerNo" align="center" label="挂车车牌" width="120" />
            <el-table-column prop="startArea" align="center" label="发车地" width="150" />
            <el-table-column prop="endArea" align="center" label="目的地" width="150" />
            <el-table-column prop="productName" label="货品" width="120" />
            <el-table-column prop="productWeight" label="货品重量(吨)" width="120" />

            <el-table-column v-for="(item,index) in customFields" :key="index" :prop="item.code" align="center" :label="item.name+'/元'" width="100">
              <template slot-scope="scope">
                {{ scope.row.expensesDetailVoList[index].price }}
              </template>
            </el-table-column>

            <el-table-column prop="mileage" align="center" label="公里数" width="100" />
            <el-table-column prop="fuelConsumption" align="center" label="加油升数" width="100" />
            <el-table-column prop="fuelTotal" align="center" label="加油金额" width="100" />
            <el-table-column prop="reimbursementDate" align="center" label="报销日期" width="100" />
          </div>
        </page-grid>
      </div>
    </def-layout>
  </div>
</template>
<script>
import adminSupport from 'lola-admin-support-el'
export default {
  name: 'TransportBi',
  components: {},
  mixins: [adminSupport.mixins.index],
  data() {
    return {
      name: 'TransportBi',
      formSearch: { keyword: '', status: '', creator: '', pageNo: '' },
      self: null,
      customFields: []
    }
  },
  computed: {

  },
  created() {
    this.init() // 页面自定义初始化
    // console.log('当前分页页数:' + this.dataGrid.params)
    // console.log(this.dataGrid.params)
  },
  methods: {
    init() {
      var that = this
      this.page.excelParams = {
        fileds: ['单号', '申请人', '借款金额/元', '借款时间', '车牌号', '挂车车牌号',
          '发车地', '目的地', '货品', '货品重量/吨', '公里数', '加油升数', '加油金额', '报销日期'
        ],
        queryParam: this.dataGrid.params,
        size: 10000
      }
      this.loadCostFields()
      setTimeout(() => {
        that.loadData()
      }, 500)
      this.self = that
    },
    loadCostFields() { // 拉取费用详情子集数据
      var that = this
      this.dataGrid.params.queryList.push({
        key: 'o.status',
        value: 3,
        oper: '=',
        join: 'and'
      })
      const url = that.$http.conf.api.get('wms').url + '/api/logistics/expenses-category/findBi'
      console.log(url)
      that.$http.post(url, that.dataGrid.params).then(function(rsp) {
        if (rsp.code === 200) {
          console.log(11111)
          that.customFields = rsp.data
          console.log(that.customFields)
        }
      }).catch(function(err) {
        console.log(err)
      })
    },
    search() {
      const queryList = [{
        key: 'o.status',
        value: 3,
        oper: '=',
        join: 'and'
      }]
      if (!String.isNullOrEmpty(this.formSearch.keyword)) {
        queryList.push({
          key: 'o.no',
          value: this.formSearch.keyword,
          oper: ':',
          join: 'and'
        })
      }
      if (!String.isNullOrEmpty(this.formSearch.pageNo)) {
        queryList.push({
          key: 'o.pageNo',
          value: this.formSearch.pageNo,
          oper: ':',
          join: 'and'
        })
      }
      if (!String.isNullOrEmpty(this.formSearch.creator)) {
        queryList.push({
          key: 'o.creator',
          value: this.formSearch.creator,
          oper: ':',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.carNo)) {
        queryList.push({
          key: 'carNo',
          value: this.formSearch.carNo,
          oper: ':',
          join: 'and'
        })
      }
      if (
        !String.isNullOrEmpty(this.formSearch.semitrailerNo)) {
        queryList.push({
          key: 'semitrailerNo',
          value: this.formSearch.semitrailerNo,
          oper: ':',
          join: 'and'
        })
      }
      if (this.formSearch.createTime !== null && this.formSearch.createTime.length > 0) {
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[0], 'oper': '>=', 'join': 'and' })
        queryList.push({ 'key': 'o.createTime', 'value': this.formSearch.createTime[1], 'oper': '<=', 'join': 'and' })
      }

      this.dataGrid.params.queryList = queryList
      this.refresh()
    },
    bindSearch() {
      this.formSearch = { keyword: '', originType: '', createTime: [] }
    }
    // 重写按钮方法
    // buildOtherBtn(item, btn) {
    //   switch (item.code) {
    //     case 'm5191':
    //       btn.type = 'info'
    //       btn.opt = 'printDown'
    //       break
    //     default:break
    //   }
    // },
    // printDown(row) {
    //   console.log(row)
    //   const subOutputRankPrint = document.getElementById('subOutputRank-print')
    //   console.log(subOutputRankPrint.innerHTML)
    //   const newContent = subOutputRankPrint.innerHTML
    //   const oldContent = document.body.innerHTML
    //   document.body.innerHTML = newContent
    //   window.print()
    //   window.location.reload()
    //   document.body.innerHTML = oldContent
    //   return false
    // }

  }
}
</script>
